* {
	padding: 0;
	margin: 0;
}

@media screen and ( min-width: 480px ){

	.container {
		width: 50%;
	}

	#checkContainer {
		width: 800px;
		height: 450px;
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate( -50%, -70% );
	}

	#computer {
		width: 50%;
		height: 400px;
		background-color: #9DA;
		position: absolute;
		left: 0;
		top: 0;
		border-radius: 10px 0 0 0;
	}

	#user {
		width: 50%;
		height: 400px;
		background-color: #69C;
		position: absolute;
		right: 0;
		top: 0;
		border-radius: 0 10px 0 0;
	}

	#computerMessage {
		width: 100%;
		height: 50px;
		background-color: #69C;
		position: absolute;
		left: 0;
		bottom: -50px;
		border-radius: 0 0 0 10px;
	}

	#userMessage {
		width: 100%;
		height: 50px;
		background-color: #9DA;
		position: absolute;
		right: 0;
		bottom: -50px;
		border-radius: 0 0 10px 0;
	}

	#data {
		width: 150px;
		height: 200px;
		background-color: rgba( 255, 255, 0, .8 );
		position: absolute;
		left: 50%;
		bottom: 0px;
		transform: translateX( -50% );
		border: 3px solid #FF0;
		border-radius: 10px;
	}

	#control {
		display: block;
		width: 750px;
		height: 250px;
		margin: 0 auto;
		position: absolute;
		left: 0;
		bottom: -266.7px;
	}

	#control div {
		display: inline-block;
		width: 32%;
		height: 100%;
		transition: all .1s linear 0s;
		cursor: pointer;
	}

	#control div:hover {
		opacity: .5;
	}

	#control img {
		width: 100%;
	}

}

@media screen and ( max-width: 480px ){

	#checkContainer {
		width: 100%;
		height: 550px;
		position: absolute;
		left: 0;
		top: 0;
		transform: translate( -50%, -70% );
	}

	#computer {
		width: 50%;
		height: 100px;
		position: absolute;
		left: 0;
		top: 0;
		background-color: #9DA;
		border-radius: 10px 0 0 0;
	}

	#user {
		width: 50%;
		height: 100px;
		position: absolute;
		right: 0;
		top: 0;
		background-color: #69C;
		border-radius: 0 10px 0 0;
	}

	#computerMessage {
		width: 100%;
		height: 50px;
		background-color: #69C;
		position: absolute;
		left: 0;
		bottom: -50px;
		border-radius: 0 0 0 10px;
	}

	#userMessage {
		width: 100%;
		height: 50px;
		background-color: #9DA;
		position: absolute;
		right: 0;
		bottom: -50px;
		border-radius: 0 0 10px 0;
	}

	#data {
		width: 150px;
		height: 200px;
		background-color: rgba( 255, 255, 0, .8 );
		position: absolute;
		left: 50%;
		bottom: 0px;
		transform: translateX( -50% );
		border: 3px solid #FF0;
		border-radius: 10px;
	}

	#control {
		display: block;
		width: 750px;
		height: 250px;
		margin: 0 auto;
		position: absolute;
		left: 0;
		bottom: -266.7px;
	}

	#control div {
		display: inline-block;
		width: 32%;
		height: 100%;
		transition: all .1s linear 0s;
		cursor: pointer;
	}

	#control div:hover {
		opacity: .5;
	}

	#control img {
		display: none;
		width: 100%;
	}

}